<template>
	<div class="footer">
		<div class="box80">
			 <div class="wid100 footer_top">
            <div class="cont cont1"><img src="@/assets/images/icon1_11.png" alt=""></div>
            <div class="cont cont2">
                <div class="font16">联系我们</div>
                <p><img src="@/assets/images/icon2_14.png" alt="">010-83421299</p>
                <p><img src="@/assets/images/icon3_18.png" alt="">北京市海淀区西三旗安宁北里12号 泰山饭店院内南A段裙楼</p>
                <p><img src="@/assets/images/icon4_22.png" alt="">heguanghui@cslaic.com</p>
            </div>
            <div class="cont cont3">
                <div class="font16">合作机构</div>
                <p><a href="http://www.lightingchina.com.cn/" target="_blank">中国照明学会</a></p>
                <p><a href="http://www.cali-light.com/index.php/cali/index/index.html">中国照明电器协会</a></p>
                <p><a href="http://www.cbda.cn/" target="_blank">中国建筑装饰协会</a></p>
                <p><a href="http://www.iesb.org.cn/" target="_blank">北京照明学会</a></p>
                <p><a href="http://www.szlightingtec.com/" target="_blank">深圳市城市照明学会</a></p>
                <p><a href="http://www.isa-world.org/" target="_blank">国际半导体照明联盟（ISA）</a></p>
                <p><a href="http://zm.shejis.com/">照明设计师交流中心</a></p>
            </div>
            <div class="cont cont3">
                <div class="font16">合作媒体</div>
                <p><a href="http://www.lightingchina.com.cn/" target="_blank">中国照明网</a></p>
                <p><a href="https://www.alighting.cn/" target="_blank">阿拉丁照明网</a></p>
                <p><a href="http://zmgx.chinajournal.net.cn" target="_blank">照明工程学报</a></p>
                <p><a href="http://zmzk.wolighting.com/" target="_blank">照明周刊</a></p>
                <p><a href="http://www.djser.com/" target="_blank">中国地产建筑师网</a></p>
                <p><a href="http://www.light-up.hk/" target="_blank">LIGHT UP</a></p>
            </div>
            <div class="cont cont3">
                <div class="font16">友情链接</div>
            </div>
            <!-- <div class="cont cont3">
                <div class="font16">关于我们</div>
            </div> -->
        </div>
        <div class="footer_bom">
            <span>北京和光汇科技有限责任公司版权所有</span>
            <a href="http://www.beian.miit.gov.cn" target="_blank">京ICP备19039498号-1</a>
            <!-- <span>技术支持：众策设计</span> -->
        </div>
		</div>
        <!-- <div class="backTop">
            <i class="el-icon-caret-top"></i>
        </div> -->
        
        <el-backtop class="page-component__scroll el-scrollbar__wrap backTop"></el-backtop>
	</div>
</template>
<script>
export default {
    updated(){
        
    }
}
</script>

<style  rel="stylesheet/scss" lang="scss" scoped>
.backTop{
    position: fixed;
    background-color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 6px rgba(0,0,0,.12);
    cursor: pointer;
    z-index: 5;
    right: 20px;
    bottom: 40px;
    overflow: hidden;
    i{
        color: #409eff;
        font-size: 20px;
    }
}
.footer{
	background: #fff;
	 padding: 5rem 0 3rem;
	.footer_top{
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
        padding-top: 2px;
		 .font16{
			color: #020202;
			margin-bottom: 20px;
		}
		 p{
			margin-bottom: 10px;
			color: #7d7d7d;
			position: relative;
		}
        .cont1{
            img{
                width: 130px;
                height: 130px;
            }
        }
		.cont2 p{
			padding-left: 26px;
			 img{
				position: absolute;
				top:2px;
				left: 0;
			}
			&:last-child img{
				top:5px;
			}
		}
	}
	.footer_bom{
		border-top: solid 1px rgba(153, 153, 153, 0.3);
		text-align: center;
		padding-top: 3rem;
		margin-top: 2rem;
        span{
            margin: 0 10px;
        }
        a{
            display: inline-block
        }
	}
}
@media (max-width: 992px){
    .footer{
        padding: 3rem 0 1rem;
        .footer_top{
            display: block;
            .font16{
                margin-bottom: 10px;
            }
            p{
                font-size: 12px;
                line-height: 1em;
            }
            .cont:first-child{
                img{
                    height: 100px;
                }
            }
            .cont2{
                p {
                        line-height: 18px;
                    img{
                        top: -3px;
                    }
                    &:nth-child(3){
                        img{
                            top: 2px;
                        }
                    }
                    &:last-child img{
                        top: 4px;
                    }
                } 
            }
            .cont{
                float: left;
                p img{
                    top: 0;
                }
            }
            .cont1{
                width: 50%;
                text-align: right;
                padding-right: 10px;
                height: 126px;
                padding-top: 10px;
            }
            .cont2{
                width: 50%;
                padding-left: 10px;
                height: 126px;
            }
            .cont3{
                width: 25%;
                text-align: center;
            }
        } 
        .footer_bom{
            padding-top: 1.5rem;
            margin-top: 1rem;
            span{
                margin: 0 5px;
            }
        }
     } 
}
@media (max-width: 500px){
    .footer .footer_top .cont{
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        height: auto !important;
        margin-bottom: 16px;
        &:first-child img{
            height: 80px;
        }
        &:last-child{
            margin-bottom: 0;
        }
    }
    .footer .footer_top .cont2 .font16{
        margin-bottom: 2px;
    }
    .footer .footer_top .cont2 p{
        padding-left: 0;
        margin-bottom: 5px;
        img{
            position: initial;
            margin-right: 6px;
        }
        &:nth-child(2){
            img{
                position: relative;
                top: 5px;
            }
        }
    }
    .footer .footer_bom{
        font-size: 12px;
    }
}

</style>
